<ng-form name="innerForm">
    <div ng-if="prStDes[de.id].dataElement.optionSetValue">
        <div class="hideInPrint">
            <div ng-if="!prStDes[de.id].renderOptionsAsRadio || optionSets[prStDes[de.id].dataElement.optionSet.id].options.length >= 7">
                <d2-option-list  d2-model="currentEvent"
                                 d2-model-id="de.id"
                                 d2-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                                 d2-disabled="!dataElementEditable(prStDes[de.id])"
                                 d2-change="saveDatavalue(prStDes[de.id])"
                                 d2-max-option-size="maxOptionSize"
                                 d2-option-filter="optionVisibility[currentEvent.event]"
                                 d2-all-options="optionSets[prStDes[de.id].dataElement.optionSet.id].options"
                                 d2-use-notification="true"
                                 d2-element="currentElement">
                </d2-option-list>
            </div>

            <div ng-if="prStDes[de.id].renderOptionsAsRadio && optionSets[prStDes[de.id].dataElement.optionSet.id].options.length < 7">
                <d2-radio id="de.id" 
                    d2-name="foo" 
                    d2-value-saved="currentElement.saved && currentElement.id === de.id"
                    d2-object="currentEvent"
                    d2-option-filter="optionVisibility[currentEvent.event]"
                    d2-options="optionSets[prStDes[de.id].dataElement.optionSet.id].options"
                    d2-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    d2-disabled="!dataElementEditable(prStDes[de.id])"
                    d2-function="saveDataValueForRadio(prStDes[de.id], currentEvent, value)">
                </d2-radio>                
            </div>
        </div>
        <div class="not-for-screen">
            <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
        </div>
    </div>
    <div ng-if="!prStDes[de.id].dataElement.optionSetValue" ng-switch="prStDes[de.id].dataElement.valueType">
        <div ng-switch-when="NUMBER">
            <div class="hideInPrint">
                    <input 
                        type="number"
                        autocomplete="off"
                        d2-number-validator
                        number-type={{prStDes[de.id].dataElement.valueType}}
                        class="form-control"
                        ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                        ng-model="currentEvent[de.id]"
                        ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                        ng-disabled="!dataElementEditable(prStDes[de.id])"
                        ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                        name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="PERCENTAGE">
            <div class="hideInPrint">
                <input 
                    type="number"
                    autocomplete="off"
                    d2-number-validator
                    number-type={{prStDes[de.id].dataElement.valueType}}
                    class="form-control"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                    name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="INTEGER">
            <div class="hideInPrint">
                <input 
                    type="number"
                    autocomplete="off"
                    d2-number-validator
                    number-type={{prStDes[de.id].dataElement.valueType}}
                    class="form-control"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                    name="foo" />
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="INTEGER_POSITIVE">
            <div class="hideInPrint">
                <input 
                    type="number"
                    autocomplete="off"
                    d2-number-validator
                    number-type={{prStDes[de.id].dataElement.valueType}}
                    class="form-control"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                    name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="INTEGER_NEGATIVE">
            <div class="hideInPrint">
                <input 
                    type="number"
                    autocomplete="off"
                    d2-number-validator
                    number-type={{prStDes[de.id].dataElement.valueType}}
                    class="form-control"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                    name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="INTEGER_ZERO_OR_POSITIVE">
            <div class="hideInPrint">
                <input 
                    type="number"
                    autocomplete="off"
                    d2-number-validator
                    number-type={{prStDes[de.id].dataElement.valueType}}
                    class="form-control"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                    name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="AGE">
            <d2-age id="{{de.id}}"
                    d2-age-saved="currentElement.saved && currentElement.id === prStDe.dataElement.id"
                    d2-object="currentEvent"
                    d2-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    d2-disabled="!dataElementEditable(prStDes[de.id])"
                    d2-function="saveDatavalue(prStDes[de.id], innerForm.foo)">
            </d2-age>
        </div>
        <div ng-switch-when="PHONE_NUMBER">
            <div class="hideInPrint">
                <input 
                    type="text"
                    autocomplete="off"
                    class="form-control"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                    name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="BOOLEAN">
            <div class="hideInPrint form-control">
                <d2-radio-button
                    dh-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    dh-disabled="!dataElementEditable(prStDes[de.id])"
                    dh-value="currentEvent[de.id]"
                    dh-name="foo"
                    dh-current-element="currentElement"
                    dh-event="currentEvent.event"
                    dh-id="de.id"
                    dh-click="saveDataValueForRadio(prStDes[de.id], currentEvent, value)"
                    dh-field="innerForm.foo"
                    ng-disabled="!dataElementEditable(prStDes[de.id])">
                </d2-radio-button>
            </div>
            <div class="not-for-screen">
                <label class="radio-inline"><input type="radio" ng-attr-value="true" ng-model="currentEvent[de.id]">{{'yes' | translate}}</label>
                <label class="radio-inline"><input type="radio" ng-attr-value="false" ng-checked="currentEvent[de.id]">{{'no' | translate}}</label>
            </div>
        </div>
        <div ng-switch-when="DATE">
            <div class="hideInPrint">
                <input 
                    type="text"
                    autocomplete="off"
                    ng-attr-placeholder="{{dhis2CalendarFormat.keyDateFormat}}"
                    d2-date
                    d2-date-validator
                    max-date="prStDes[de.id].allowFutureDate ? '' : 0"
                    class="form-control"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    blur-or-change="saveDatavalue(prStDes[de.id])"
                    name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="TIME">
            <d2-time time-model="currentEvent"
                    time-model-id="de.id"
                    time-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    time-save-methode="saveDatavalue"
                    time-save-methode-parameter1="prStDes[de.id]"
                    time-use-notification="true"
                    time-element="currentElement"
                    time-disabled="!dataElementEditable(prStDes[de.id])"
                    time-format="timeFormat">
            </d2-time>
        </div>
        <div ng-switch-when="DATETIME">
            <d2-date-time datetime-model="currentEvent"
                          datetime-model-id="de.id"
                          datetime-date-placeholder="{{dhis2CalendarFormat.keyDateFormat}}"
                          datetime-max-date="prStDes[de.id].allowFutureDate ? '' : 0"
                          datetime-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                          datetime-save-methode="saveDatavalue"
                          datetime-save-methode-parameter1="prStDes[de.id]"
                          datetime-field="innerForm"
                          datetime-use-notification="true"
                          datetime-element="currentElement"
                          datetime-disable-popup="true"
                          datetime-disabled="!dataElementEditable(prStDes[de.id])"
                          datetime-outerform="outerDataEntryForm">
            </d2-date-time>
        </div>
        <div ng-switch-when="TRUE_ONLY">
            <div class="hideInPrint">
                <input type="checkbox"
                       class="form-control-checkbox"
                       ng-model="currentEvent[de.id]"
                       ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                       ng-disabled="!dataElementEditable(prStDes[de.id])"
                       ng-change="saveDatavalue(prStDes[de.id], innerForm.foo)"
                       name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="checkbox" class="form-control-checkbox" ng-checked={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="LONG_TEXT">
            <div class="hideInPrint">
                    <textarea rows="3"
                        class="form-control"
                        autocomplete="off"
                        ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                        ng-model="currentEvent[de.id]"
                        ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                        ng-disabled="!dataElementEditable(prStDes[de.id])"
                        ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                        name="foo">
                    </textarea>
            </div>
            <div class="not-for-screen">
                <textarea rows="3" class="form-control">{{currentEvent[de.id]}}</textarea>
            </div>
        </div>
        <div ng-switch-when="TEXT">
            <div class="hideInPrint">
                <input type="text"
                    autocomplete="off"
                    class="form-control"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                    name="foo"/>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="USERNAME">
            <div class="hideInPrint">
                <d2-users-input d2-model="currentEvent"
                                d2-model-id="de.id"
                                d2-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                                d2-disabled="!dataElementEditable(prStDes[de.id])"
                                d2-save-methode="saveDatavalue"
                                d2-save-methode-parameter1="prStDes[de.id]"
                                d2-save-methode-parameter2="innerForm.foo"
                                d2-max-option-size="maxOptionSize"
                                d2-use-notification="true"
                                d2-element="currentElement">
                </d2-users-input>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[de.id]}}>
            </div>
        </div>
        <div ng-switch-when="FILE_RESOURCE">
            <div class="hideInPrint">
                <div class="input-group">
                    <div class="form-control">
                        <a href ng-click="downloadFile(currentEvent.event, de.id)" ng-attr-title="{{fileNames[currentEvent.event][de.id]}}">{{fileNames[currentEvent.event][de.id].length > 20 ? fileNames[currentEvent.event][de.id].substring(0,20).concat('...') : fileNames[currentEvent.event][de.id]}}</a>
                    </div>
                        <span class="input-group-btn">
                            <span class="btn btn-grp btn-file" ng-click="deleteFile(currentEvent,de.id)" ng-if="currentEvent[de.id]">
                                <span
                                      ng-attr-title="{{'delete' | translate}}"
                                      d2-file-input-name="fileNames[currentEvent.event][de.id]"
                                      d2-file-input-delete="currentEvent[de.id]">
                                    <i class="fa fa-trash"></i>
                                </span>
                            </span>
                            <span class="btn btn-grp btn-file" ng-if="!currentEvent[de.id]">
                                <span ng-attr-title="{{'upload' | translate}}">
                                    <i class="fa fa-upload"></i>
                                    <input type="file"
                                           ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                                           ng-disabled="!dataElementEditable(prStDes[de.id])"
                                           name="foo"
                                           input-field-id={{de.id}}
                                           d2-file-input-ps="currentStage"
                                           d2-file-input="currentEvent"
                                           d2-file-input-current-name="currentFileNames"
                                           d2-file-input-name="fileNames">
                                </span>
                            </span>
                        </span>
                </div>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[prStDe.dataElement.id]}}>
            </div>
        </div>
        <div ng-switch-when="IMAGE">
            <div class="hideInPrint">
                <d2-image d2-display-open="true"
                    d2-can-edit="true"
                    d2-hide-image="registrationAndDataEntry ? true : false"
                    d2-event="currentEvent"
                    d2-data-element-id="de.id"
                    d2-file-names="fileNames"
                    d2-current-image-name="currentFileNames"
                    d2-ps="currentStage"
                    d2-delete-methode="deleteFile"
                    d2-download-methode="downloadFile"
                    d2-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    d2-diabled="!dataElementEditable(prStDes[de.id])">
                </d2-image>
            </div>
            <div class="not-for-screen">
                <input type="text" class="form-control" ng-attr-value={{currentEvent[prStDe.dataElement.id]}}>
            </div>
        </div>       
        <div ng-switch-when="COORDINATE">            
            <d2-map id="{{de.id}}"                    
                d2-lat-saved="currentElement.saved && currentElement.id === de.id"
                d2-lng-saved="currentElement.saved && currentElement.id === de.id"
                d2-object="currentEvent" 
                d2-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                d2-disabled="!dataElementEditable(prStDes[de.id])"
                d2-function="saveDatavalue(arg1)" 
                d2-coordinate-format="'TEXT'"
                d2-function-param-text="prStDes[de.id]"
                d2-function-param-coordinate="LATLNG">
            </d2-map>
        </div>        
        <div ng-switch-when="ORGANISATION_UNIT">
            <d2-org-unit-tree
                selected-org-unit-id="{{selectedOrgUnit.id}}"
                id="{{de.id}}"
                d2-value="currentEvent[de.id]"
                d2-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                d2-disabled="!dataElementEditable(prStDes[de.id])"
                d2-object="currentEvent"
                d2-function="saveDatavalue(prStDes[de.id], innerForm.foo)"
                d2-orgunit-names="orgUnitNames">
            </d2-org-unit-tree>
        </div>
        <div ng-switch-when="EMAIL">
            <input 
                type="email"
                autocomplete="off"
                name="foo"
                class="form-control"
                ng-model="currentEvent[de.id]"
                ng-model-options="{ updateOn: 'default blur', allowInvalid: true }"
                selected-program-id={{selectedProgram.id}}
                selected-tei-id={{selectedTei.trackedEntityInstance}}
                ng-disabled="!dataElementEditable(prStDes[de.id])"
                ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"/>
        </div>
        <div ng-switch-when="URL">
            <div class="hideInPrint">
                <input type="url"
                    autocomplete="off"
                    d2-url-validator
                    ng-attr-placeholder="{{'url_format' | translate}}"
                    class="form-control"
                    ng-pattern="/^(http|https):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,6}(:[0-9]{1,5})?(\/.*)?$/"
                    ng-class="getInputNotifcationClass(de.id,false, currentEvent)"
                    ng-model="currentEvent[de.id]"
                    ng-required="prStDes[de.id].compulsory || mandatoryFields[currentEvent.event][de.id]"
                    ng-disabled="!dataElementEditable(prStDes[de.id])"
                    ng-blur="saveDatavalue(prStDes[de.id], innerForm.foo)"
                    name="foo"/>
            </div>
        </div>
        <div ng-switch-default>
            <div class="alert alert-danger form-control">
                {{'unsupported_value_type' | translate}}:  {{prStDes[de.id].dataElement.valueType}}
            </div>
        </div>
    </div>
    <div ng-messages="innerForm.foo.$error" ng-if="interacted(innerForm.foo, outerDataEntryForm)" class="required" ng-messages-include="../dhis-web-commons/angular-forms/error-messages.html">          
        <!-- URL error message is temporarily placed here. Should be placed with the other error messages in the core. -->
        <span ng-message="urlValidator">{{'url_error' | translate}}</span>
        <span ng-message="timeValidator">{{'time_error' | translate}}</span>
    </div>
    <div class="alert alert-warning alert-dismissible" role="alert" ng-if="warningMessages[currentEvent.event][de.id]">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {{warningMessages[currentEvent.event][de.id]}}
    </div>
    <div class="alert alert-danger alert-dismissible" role="alert" ng-if="errorMessages[currentEvent.event][de.id]">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {{errorMessages[currentEvent.event][de.id]}}
    </div>
</ng-form>